<style lang="less">
@import "../../styles/common.less";
</style>

<template>
  <div>
    <Row type="flex" justify="space-between">
      <Row>
        <Select v-model="queryUserType" style="width:150px;margin-right:8px" placeholder="请选择用户类型">
          <Option value key>不限</Option>
          <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
        <Select
          v-model="queryCustomType"
          style="width:150px;margin-right:8px"
          placeholder="请选择自定义类型"
        >
          <Option value key>不限</Option>
          <Option value="0" key="0">静态</Option>
          <Option value="1" key="1">动态</Option>
          <!-- <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option> -->
        </Select>
        <Button type="primary" @click="handleQuery">查询</Button>
      </Row>
      <Row>
        <Dropdown @on-click="handleAddCustom">
          <Button type="primary">
            新建
            <Icon type="arrow-down-b"></Icon>
          </Button>
          <DropdownMenu slot="list">
            <DropdownItem name="static">静态自定义配置</DropdownItem>
            <DropdownItem name="dynamic">动态时间配置</DropdownItem>
          </DropdownMenu>
        </Dropdown>
        <!--<Button icon="ios-plus-outline" type="primary" @click="showAddIpcModal">新建</Button>-->
      </Row>
    </Row>
    <Table
      class="margin-top-10"
      ref="customTable"
      :columns="customColumn"
      :data="customDataList"
      :loading="customLoading"
    ></Table>
    <AddCustomModal ref="addCustom" :update_callback="onCustomUpdate"/>
  </div>
</template>


<script>
import Utils from "@/libs/util";
import ME from "@/controllers/custom";
import DateUtils from "../../../node_modules/iview/src/utils/date";
import iconEdit from "../../images/edit.png";
import iconPwd from "../../images/password.png";
import iconStop from "../../images/stop.png";
import iconRestart from "../../images/restart.png";
import iconDelete from "../../images/delete.png";

import AddCustomModal from "./components/AddCustomModal";

import Tooltip from "../../../node_modules/iview/src/components/tooltip/tooltip";
import Btn from "../../../node_modules/iview/src/components/button/button";
import {
  getHistoryData,
  getAvatar,
  getTypeList,
  getDownloadUrl
} from "../../controllers/record";

export default {
  components: {
    AddCustomModal,
    Tooltip,
    Btn
  },
  data() {
    return {
      typeList: [],
      queryUserType: "",
      queryCustomType: "",
      customDataList: [],
      customLoading: true,
      customColumn: [
        {
          title: "用户类型",
          align: "center",
          key: "user_type_label"
        },
        {
          title: "提示类型",
          align: "center",
          key: "custom_type_label"
        },
        {
          title: "提示时间",
          align: "center",
          key: "tips_time_range"
        },
        {
          title: "主标题",
          align: "center",
          key: "title"
        },
        {
          title: "副标题",
          align: "center",
          key: "body"
        },
        {
          title: "背景颜色",
          aligin: "center",
          key: "bgcolor",
          render: (h, { row }) => {
            return (
              <div style={{ "background-color": row.bgcolor }}>
                <span> &nbsp; </span>
              </div>
            );
          }
        },
        {
          title: "操作",
          align: "center",
          width: "120px",
          render: (h, { row, column, index }) => {
            return (
              <div class="operation">
                <Tooltip content="编辑IPC" placement="bottom">
                  <Btn
                    style={{ background: `url( ${iconEdit})` }}
                    onClick={() => this.handleEditCustom(row)}
                  />
                </Tooltip>
                <Tooltip content="删除" placement="bottom">
                  <Btn
                    style={{ background: `url( ${iconDelete})` }}
                    onClick={() => this.handleDelCustom(row)}
                  />
                </Tooltip>
              </div>
            );
          }
        }
      ]
    };
  },
  created() {
    this.loadCustoms();
  },
  methods: {
    handleQuery() {
      this.loadCustoms();
    },
    handleAddCustom(type) {
      this.$refs["addCustom"].showAsAdd(type);
    },
    loadCustoms() {
      this.customLoading = true;
      getTypeList("1")
        .then(json => {
          this.typeList = json.data;
        })
        .then(() => {
          let user_type = undefined;
          let custom_type = undefined;
          if (this.queryUserType != "") {
            user_type = this.queryUserType;
          }
          if (this.queryCustomType != "") {
            custom_type = this.queryCustomType;
          }
          ME.query(user_type, custom_type).then(res => {
            console.log(res);
            if (res.code !== 0) {
              //非正常就返回空表
              return;
            }
            let data = res.data;
            //检测数据块存在及长度
            if (data === undefined) {
              return;
            }
            this.customLoading = false;
            this.formatCustoms(data);
          });
        });
    },
    formatCustoms(customs) {
      let list = [];
      customs.map(custom => {
        let label = "";
        this.typeList.map(type => {
          if (type.value == custom.user_type) {
            label = type.label;
          }
        });
        let item = {
          _id: custom._id,
          user_type: custom.user_type,
          custom_type: custom.custom_type,
          user_type_label: label,
          custom_type_label: custom.custom_type == "0" ? "静态" : "动态",
          start_time: custom.start_time,
          end_time: custom.end_time,
          tips_time_range: `${custom.start_time} - ${custom.end_time}`,
          validate_time: [custom.start_time, custom.end_time],
          title: custom.title,
          body: custom.body,
          bgcolor: custom.bgcolor,
          name: custom.name,
          stay: Number(custom.stay),
          voice_type: custom.voice_type + "",
          voice_text: custom.voice_text
        };
        if (custom.custom_type == 0) {
          item.tips_time_range = "--:-- - --:--";
        } else {
          let sh = custom.start_time.slice(0, 2);
          let sm = custom.start_time.slice(2);
          let eh = custom.end_time.slice(0, 2);
          let em = custom.end_time.slice(2);
          item.tips_time_range = `${sh}:${sm} - ${eh}:${em}`;
        }
        list.push(item);
      });
      this.customDataList = list;
    },
    onCustomUpdate() {
      this.loadCustoms();
    },
    handleDelCustom(row) {
      ME.delete(row._id).then(res => {
        this.loadCustoms();
      });
    },
    handleEditCustom(row) {
      this.$refs["addCustom"].showAsUpdate(row);
    }
  }
};
</script>